import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image} from '@tarojs/components'
import {IndexDiyModule, IndexDiyModuleGood} from 'src/utils/server.interface'
import {gotoPage} from '../../utils/tools'
import RightArrow from '../../components/icon/right-arrow'
import Float from '../../components/float/float';
import {TARO_ENV} from '../../constants/api'
import {platform} from "../../utils/platform-settting.service";
import './index-sale.scss'

const IndexSaleCommon: React.FC<IndexDiyModule<IndexDiyModuleGood[]>> = (props) => {
  const dataColor = Taro.getStorageSync('colorData');
  const [firstGood, setFirstGood] = useState<IndexDiyModuleGood>({
    id: 0,
    name: '',
    img: '',
    price: 0,
    url: ''
  })
  const [goods, setGoods] = useState<IndexDiyModuleGood[]>([])
  useEffect(() => {
    setFirstGood(props.data.slice(0, 1)[0])
    setGoods(props.data.slice(1))
  }, [props.data])
  return (
    <View className='index-sale-common index-sale-box index-sale-box-other'>
      {(props.name || props.moreUrl) && <View className='title-box'>
        <View className='title'>{props.name}</View>
        {!!props.moreUrl && <View className='more' onClick={() => gotoPage(props.moreUrl)}>
          <Text>更多</Text>
          <RightArrow />
        </View>}
      </View>}
      {!props.name && !props.moreUrl && <View style='height: 10px' />}
      <View className='content-box'>
        <View className='cover' onClick={()=>{Taro.navigateTo({url: firstGood.url})}}>
          <Image className={`img ${TARO_ENV + 'img'}`} src={firstGood.main_img || firstGood.img} mode='widthFix' />
        </View>
        <View className='goods'>
          {goods.length > 0 && goods.map(item => <View className='good-item' key={item.id} onClick={()=>{Taro.navigateTo({url: item.url})}}>
            <View className='shangxin-today-block-item-image'>
              <Image mode='aspectFill' src={item.main_img || item.img} className='img' />
              {process.env.DISTINGUISH_IDENTITY && (!!item.commission || !!item.commission_price) && !(item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin')) && <View className='commission_price'>
                <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.commission || item.commission_price} />
              </View>}
            </View>
            <View className='title'>{item.name}</View>
            {item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
              <View className='fee-into'>免费入园</View>:
              <View className='price'>
              <View className='shangxin-today-block-item-bottom-price' style={`color: ${dataColor.priceColor};`}>
                <Text className='shangxin-today-block-item-bottom-price-before inline'>￥</Text>
                <Float value={item.price || 0} />
                <Text className='m-r-10' />
                {item.discount && <Text className='box-discount' style={` background-color: ${dataColor.priceColor};`}>
                  { item.discount }折
                </Text>}
                {(!!item.market_price || !!item.marketPrice) && <Text className='shangxin-today-block-item-bottom-original'>
                  {item.market_price || item.marketPrice}
                </Text>}
              </View>
            </View>}
            {!!platform.info.is_show_sales_volume && !!item.sales_volume && <View className='salesVolume'>销量：{item.sales_volume}笔</View>}
          </View>)}
        </View>
      </View>
    </View>
  )
}
IndexSaleCommon.defaultProps = {
  name: '',
  moreUrl: '',
  data: [],
  type: ''
}

export default IndexSaleCommon
